import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { WapHome, WapHomeO } from '@react-vant/icons';
export default function ButtomBar() {
    let navigate = useNavigate()
    let location = useLocation()
    // 标签栏
    let [num, setNum] = useState(0)
    // 关注功能上是关于这个账号其中的一个关注字段来判断（动态）
    let arr = [
        { id: 1, ischecked: false, title: "全部", ico: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/u265.png", ischeckedIco: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/u265_selected.png?token=83ed4f4899f3758808d864a85b420a93a91d606a1356328d9fda638976226f58", href: "/shop/list" },
        { id: 2, ischecked: false, title: "分类", ico: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/u263.png", ischeckedIco: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/u263_selected.png?token=6021d4a46fbdf8c7504f7eb8d9b18a635a527d13719aef409d6d400e04cf1560", href: "/shop/ShopClassify" },
        { id: 3, ischecked: false, title: "客服", ico: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1735.png", ischeckedIco: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1735.png", href: "/customer" },
        { id: 4, ischecked: false, title: "购物车", ico: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/u274.png", href: "/gouwu" },
        { id: 5, ischecked: false, title: "收藏", ico: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/u264.png", ischeckedIco: "https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83/u264_selected.png?token=f337213c98d9e82c8821d2bd5a1efd032ad91dd19ffc60c6d267c57d691e19df" },
    ]
    let checkeditem = (id) => {
        setNum(id)
        let URL = arr[id - 1].href
        navigate(URL)
    }
    let ischeckedhome = () => {
        setNum(0)
        navigate("/shop/home")
    }
    // 首先是uselocation
    useEffect(() => {
        let url = (location.pathname)
        let index = arr.findIndex((item) => {
            return item.href === url
        })
        setNum(index + 1)
    }, [location])

    return (
        <div className='bottom_bar'>
            <div className='aa'>
                <div onClick={ischeckedhome} className='radiuce items'>
                    {
                        num === 0 ? <WapHome color="#C7B09A" fontSize={'20px'} /> : <WapHomeO fontSize={'20px'} />
                    }
                    <span style={{ color: num === 0 ? "#C7B09A" : "#666666" }} className='textstyle'>首页</span>
                </div>
            </div>

            {
                arr.map((item, index) => {
                    return (
                        <div onClick={() => { checkeditem(item.id) }} className={num === index + 1 ? "active1" : "items"} key={index}>
                            {
                                index + 1 === num ? <img src={item.ischeckedIco}></img> : <img src={item.ico}></img>
                            }
                            <span className='textstyle'>{item.title}</span>
                        </div>
                    )
                })
            }
        </div>
    )
}
